<template>
  <view class="followers-page">
    <user-list
      :users="users"
      :loading="loading"
      :has-more="hasMore"
      empty-text="暂无粉丝"
      @follow-change="onFollowChange"
    ></user-list>
  </view>
</template>

<script>
import { userApi } from '@/utils/api.js';
import UserList from '@/components/user/UserList.vue';

export default {
  components: {
    UserList
  },
  data() {
    return {
      userId: null,
      users: [],
      loading: false,
      hasMore: false
    };
  },
  onLoad(options) {
    this.userId = options.id;
    this.loadFollowers();
  },
  methods: {
    // 加载粉丝列表
    async loadFollowers() {
      if (this.loading) return;
      
      try {
        this.loading = true;
        const res = await userApi.getFollowers();
        
        if (res.code === 200 && res.data) {
          // 为每个用户添加isFollowing标记
          const users = res.data;
          const followingStatus = await Promise.all(
            users.map(user => userApi.checkFollowing(user.id))
          );
          
          this.users = users.map((user, index) => ({
            ...user,
            isFollowing: followingStatus[index].data
          }));
        }
      } catch (error) {
        console.error('获取粉丝列表失败:', error);
        uni.showToast({
          title: '获取粉丝列表失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 处理关注状态变化
    onFollowChange({ userId, isFollowing }) {
      const userIndex = this.users.findIndex(user => user.id === userId);
      if (userIndex !== -1) {
        this.users[userIndex].isFollowing = isFollowing;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.followers-page {
  min-height: 100vh;
  background-color: #fff;
}
</style>
